<template>
    <div class="tabs">
        <el-tag 
        v-for="(item,index) in tags" 
        :key="item.label" 
        :type="item.type" 
        @close="handleClose(item,index)"
        @click="changeMenu(item)"
        :closable="item.name !== 'home'"
        size="small"
        :effect="$route.name === item.name ? 'dark' : 'plain'">
            {{ item.label }}
        </el-tag>
    </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
    name:'CommonTag',
    data(){
        return {

        }
    },
    computed:{
        ...mapState({
            tags: state => state.tab.tabList
        })
    },
    methods:{
        ...mapMutations(['closeTag']),
        changeMenu(item){
            this.$router.push( { name: item.name})
        },
        //删除逻辑 点击tag 删除的功能
        handleClose(item,index){
            //调用store 中的mutation 方法
            this.closeTag(item)
            const length = this.tags.length 
            //删除后的跳转
            if(item.name !== this.$route.name){
                return 
            }
            //表示的是删除所有数据中的最后一项
            if(index === length){
                this.$router.push({
                    name: this.tags[index -1].name
                })
            }
            else {
                this.$router.push({
                    name:this.tags[index].name
                })
            }

        }
    }
}
</script>
<style>
.tabs{
    padding: 10px;
    .el-tag{
        margin-right: 15px;
        cursor: pointer;
    }
}
</style>